<template>
  <div>
    <div id="mainSnakLine" class="main-snakLine">
      <div class="snakLine" v-for="(row, index) in snckData">
        <div class="begin-circle" v-if="index == 0"></div>
        <ul class="main-box">
          <li
            v-for="col in row"
            :class="getWczt(col?.status)"
            @click="handleItem(col)"
          >
            {{ col.title }}
          </li>
        </ul>
        <div class="end-circle" v-if="index + 1 == rowNum"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSnakeLine } from "./snackLine.js";
const emit = defineEmits(["handleClear"]);

defineExpose({
  InitializeComponent,
});

const props = defineProps({
  id: {
    required: true,
    type: Number,
    default: undefined,
  },
  active: {
    required: true,
    type: Number,
    default: 10,
  },
});

const currentObj = ref();

const { colNum, rowNum, data, snckData, getWczt, initSnckLine } =
  useSnakeLine();

function handleItem(obj: any) {}

function updateStatus(code: number) {
  data.value.forEach((item) => {
    if (item.code === code) {
      item.status = 1;
    } else if (item.code < code) {
      item.status = 0;
    }
  });
}

async function InitializeComponent(index: number) {
  data.value.forEach((item) => {
    item.status = -1;
  });

  updateStatus(index);

  initSnckLine();

  window.addEventListener("resize", initSnckLine);
  return () => {
    window.removeEventListener("resize", initSnckLine);
  };
}

function handleQuery() {
  emit("handleClear");
}

onMounted(() => {
  initSnckLine();
});

onBeforeUnmount(() => {});
</script>

<style lang="scss" scoped>
@import "./snackLine.css";

.explain-box {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  .explain-item {
    width: 50px;
    height: 25px;
    border-radius: 10px;
    border: 1px solid #fe5050;
  }
}
</style>
